<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>欢迎来到{{message}}学习</h1>
        <button v-on:click="showInfo">点我提示信息(不传参)</button>
        <button @click="clickHalder(10,$event)">点我提示信息(传参)</button>
    </div>
    <script src="../JavaScript/vue.js"></script>
    <script>
        /*
        *可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码事件处理的方法必须配在 methods里
        *事件的基本使用：
        *   使用v-on:xx或者@xxx绑定事件，其中xxx是事件名
        *   事件的回调需要配置在methods中，事件处理方法最终会出现在vm上
        *   methods中配置的事件处理函数不能写箭头函数，否则this就不是vm
        *   methods中配置的事件处理函数都是被Vue所管理的函数this指向是vm或者组件实例
        * */
        const vm = new Vue({
            el: "#app",
            data: {message: "你好尚硅谷",},
            methods: {
                showInfo(event){
                    // 事件处理函数里面的this指向Vue实例(普通函数)
                    console.log(this.message,event.target)
                },
                clickHalder(num,event){
                    // 事件处理函数里面的this指向Vue实例(普通函数)
                    console.log(num,event.target)
                }
            }
        })
    </script>
</body>

</html>
